<template>
  <div>
    <common-table
      :table-type="tableType"
      :table-data="tableData"
      :on-selection-change="onSelectionChange"
      v-model:total="currentTotal"
      v-model:page="currentPage"
      v-model:pageSize="pageSize"
      :handle-current-change="handleCurrentChange"
      :showPagination="true"
    />
  </div>
</template>

<script setup lang="ts">
import CommonTable from "@/components/common/CommonTable.vue";
import { onMounted, reactive, ref } from "vue";
import api from "@/api";
import { tableType } from "./utils";

/*
 * Static state TableTeacherCourse
 * */
function getTableData(val: number) {
  api.user.listPageUser(val, 15, 1).then((res: any) => {
    if (res.success) {
      tableData.value = res.data.records;
      currentTotal.value = res.data.total;
    }
  });
}

const tableData = ref<any[]>([]);
const tableSelection = ref<any[]>([]);
const onSelectionChange = (val: any[]) => {
  tableSelection.value = val;
};

//Pager
const currentPage = ref(1);
const currentTotal = ref(0);
const pageSize = ref(20);
const handleCurrentChange = (val: number) => {
  getTableData(val);
};

onMounted(() => {
  getTableData(1);
});
</script>
